<template>
  <div class="wrap">
    <div class="container ">
      <!-- 左侧固定区域 -->
      <div class="fixed">
        <div @click="clickDianZan">
          <el-badge :value="article.like_count" :max="999" class="item ">
            <i class="iconfont icon-dianzan " :class="{ 'is-highlight': isDianZan }" />
          </el-badge>
        </div>
        <div @click="clickPingLun">
          <el-badge :value="article.comment_count" :max="999" class="item">
            <i class="iconfont icon-pinglun" />
          </el-badge>
        </div>

        <div @click="clickShouCang">
          <i class="iconfont icon-shoucang" :class="{ 'is-highlight': isShouCang }" />
        </div>
        <div>
          <i class="iconfont icon-fenxiang" />
        </div>
        <div @click="showAccusation = true">
          <i class="iconfont icon-gengduo" />
        </div>
      </div>
      <!-- 举报文章组件 -->
      <Report
        v-if="showAccusation"
        :show-accusation="showAccusation"
        :article-id="article.id"
        @showAccusation="showAccusation = false"
      />
      <!-- 评论抽屉组件 -->
      <DrawerComment
        v-if="article.id && showDrawerComment"
        :article_id="article.id"
        :drawer="showDrawerComment"
        @close="showDrawerComment = false"
        @refresh="refresh"
      />
    </div>
    <Login v-if="showLogin" @close="showLogin = false" />
  </div>
</template>

<script>
import DrawerComment from '@/news/views/components/drawerComment' // 评论抽屉组件
import Report from '@/news/views/components/Report' // 举报文章组件
import { getToken } from '@/utils/auth'
import Login from '@/news/views/components/Login'
import { getArticleLikingsId, addArticleCollections, deleteArticleCollections, getArticleCollectionsId, deleteArticleLikings, addArticleLikings } from '@/api/news/pc-web/article'
export default {
  name: 'Suspension',
  components: { DrawerComment, Report, Login },
  props: ['article'],
  data() {
    return {
      showLogin: false,
      isDianZan: false, // 是否对文章点过赞
      isShouCang: false, // 是否收藏过该文章
      showDrawerComment: false, // 是否显示评论抽屉组件
      showAccusation: false // 是否显示举报对话框
    }
  },
  created() {
    if (this.$route.params.article_id && this.$store.state.user.userInfo.id) {
      this.getArticleLikingsId(this.$route.params.article_id)
      this.isShouCangg(this.$route.params.article_id)
    }
  },
  methods: {
    // 通知父组件刷新 重新获取文章数据
    refresh() {
      this.$emit('refresh')
    },
    // 根据文章id获取文章点赞信息
    async getArticleLikingsId(id) {
      try {
        const res = await getArticleLikingsId({ userid: this.$store.getters.userId, id: id })

        if (res.status == 1) {
          this.isDianZan = true
        }
      } catch (error) {
        this.isDianZan = false
      }
    },
    // 是否收藏过该篇文章
    async isShouCangg(id) {
      const res = await getArticleCollectionsId(id)

      if (res.list.length > 0) {
        const lists = res.list.filter(info => info.article_id == this.$route.params.article_id)
        if (lists.length == 1) { this.isShouCang = true }
      }
      // if (res) {
      //   this.isShouCang = true
      // }
    },
    // 点击收藏文章
    async clickShouCang() {
      console.log(getToken())
      if (!getToken()) {
        this.$message.warning('游客无法收藏,请登录后再试')
        this.showLogin = true
        return
      }

      if (this.isShouCang == false) {
        this.$message.success('已收藏该篇文章')
        const res = await addArticleCollections({ article_id: this.$route.params.article_id })
        if (res) {
          this.isShouCang = true
        }
      } else {
        this.$message.info('已取消收藏该篇文章')
        await deleteArticleCollections(this.$route.params.article_id)
        this.isShouCang = false
      }
    },
    clickPingLun() {
      this.showDrawerComment = !this.showDrawerComment
    },
    // 对文章点赞  // 取消对文章点赞
    async clickDianZan() {
      if (!getToken()) {
        this.$message.warning('游客无法点赞,请登录后再试')
        this.showLogin = true
        return
      }
      if (this.isDianZan == false) {
        await addArticleLikings({ article_id: this.$route.params.article_id })
        this.isDianZan = true
        // 调用父亲方法刷新文章数据
        this.refresh()
      } else {
        await deleteArticleLikings(this.$route.params.article_id)
        this.isDianZan = false
        // 调用父亲方法刷新文章数据
        this.refresh()
      }
    }
  }
}
</script>
<style lang="scss" scoped>
// 固定左侧
.fixed {
  position: fixed;
  margin-left: -7rem;
  top: 200px;
  // z-index: 2;
  height: 100px;
  bottom: 50px;

  ::v-deep .el-badge__content.is-fixed {
    position: absolute;
    top: 11px;
    right: 10px;
    font-weight: 500;
    -webkit-transform: translateY(-50%) translateX(100%);
    transform: translateY(-50%) translateX(100%);
  }

  ::v-deep .el-badge__content {
    background-color: #c2c8d1;
    border-radius: 10px;
    color: #fff;
    display: inline-block;
    font-size: 12px;
    height: 18px;
    line-height: 18px;
    padding: 0 5px;
    text-align: center;
    white-space: nowrap;
    border: 0px solid #fff;
  }

  div {
    margin-bottom: 20px;
    width: 48px;
    height: 48px;
    text-align: center;
    line-height: 48px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 4%);
    cursor: pointer;

    .is-highlight:hover {
      // color: #8397ac !important;
      color: #66B1FF !important;
    }

    .is-highlight {
      color: #409EFF !important;
    }

    .iconfont:hover {
      color: #686d6d;
    }

    .iconfont {
      font-size: 22px;
      //  background-color: #9883e2;
      color: #9ea0a0;
    }
  }
}
</style>
